<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <mate name="viewport" content="width=device-width, initial-scale=1.0"></mate>
    <title>标签管理</title>
<!--    <script src="../../static/js/jquery.js"></script>-->
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.5.0/dist/semantic.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/semantic-ui@2.5.0/dist/semantic.min.css" rel="stylesheet">
<!--    <link rel="stylesheet" href="../../static/css/me.css">-->
</head>
<body>
    <!--导航-->
    <nav th:replace="_fragments :: admin_menu(13)" class="ui inverted attached segment m-padded-tb-tiny">
        <div class="ui container">
            <div class="ui inverted stackable menu secondary ">
                <h2 class="ui teal header  item">DaiYan</h2>
                <a href="#" class=" m-item item m-mobile-hide"><i class="small home icon"></i>博客</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="small idea icon"></i>分类</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="small tags icon"></i>标签</a>
                <div class="right menu m-item m-mobile-hide">
                    <div class="ui dropdown item">
                        <div class="text">
                            <img src="https://picsum.photos/seed/picsum/100/100" alt="" class="ui avatar image">
                            陈炯燏
                        </div>
                        <i class="dropdown icon"></i>
                        <div class="menu">
                            <a href="#" class="item">注销</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <a href="#" class="ui menu toggle black basic inverted m-top-right button m-mobile-show">
            <i class="sidebar icon" style="width: 0.1em"></i>
        </a>
    </nav>

    <!--中间内容-->
    <div style="height: 900px!important;" class="m-container-small m-padded-tb-large m-height">
        <div class="ui container segment">
            <input type="hidden" id="mag" value="null" th:text="${mag}">
            <form action="#" method="post" th:object="${people}" th:action="@{/admin/updateUser}" class="ui form">
                <input type="hidden" id="avatar" name="avatar" th:value="${session.user.avatar}">
                <input type="hidden" id="wxQR" name="wxQR" th:value="${session.user.wxQR}">
                <input type="hidden" id="zfbQR" name="zfbQR" th:value="${session.user.zfbQR}">
                <div class="field">
                    <div style="width: 16em; height: 300px; display: flex;">
                        <div style="display: flex; justify-content: center; align-items: center;">
                            <div class="m-avatar-div">
                                头像
                                <img style="max-height: 250px"  src="../static/images/scanner_picture.jpg" id="avatarPicture" th:src="@{*{realAvatar}}" alt="头像" />
                            </div>
                            <div class="m-avatar-div">
                                支付宝二维码
                                <img style="max-height: 250px"  src="../static/images/scanner_picture.jpg" id="wxPicture" th:src="@{${header + session.user.zfbQR}}" alt="支付宝二维码" />
                            </div>
                            <div class="m-avatar-div">
                                微信二维码
                                <img style="max-height: 250px"  src="../static/images/scanner_picture.jpg" id="zfbPicture" th:src="@{${header + session.user.wxQR}}" alt="微信二维码" />
                            </div>
                        </div>
                    </div>
                    <div class="ui left labeled input m-labeled-div">
                        <label class="ui teal basic label">头像文件</label>
                        <input type="file" id="hardFile" placeholder="头像文件">
                    </div>
                    <div class="ui left labeled input m-labeled-div">
                        <label class="ui teal basic label">支付宝文件</label>
                        <input type="file" id="hardFile1" placeholder="头像文件">
                    </div>
                    <div class="ui left labeled input m-labeled-div">
                        <label class="ui teal basic label">微信文件</label>
                        <input type="file" id="hardFile2" placeholder="头像文件">
                    </div>
                    <div id="awoke">
                        <span style="color: red">请上传小于5MB格式为PNG、JPG、JPEG、GIF的图片！！！</span>
                    </div>
                </div>

                <div class="field">
                    <div class="ui left labeled input">
                        <label class="ui teal basic label">真实名字</label>
                        <input type="text" name="username" placeholder="真实名字" th:value="*{username}">
                    </div>
                </div>

                <div class="field">
                    <div class="ui left labeled input">
                        <label class="ui teal basic label">昵称</label>
                        <input type="text" name="nickname" placeholder="昵称" th:value="*{nickname}">
                    </div>
                </div>

                <div class="field">
                    <div class="ui left labeled input">
                        <textarea name="userDescription" th:text="*{userDescription}" placeholder="个人描述..." maxlength="200"></textarea>
                    </div>
                </div>

                <div class="ui error message"></div>
                <!--/*/
                <div class="ui negative message" th:if="${#fields.hasErrors('username')}">
                    <i class="close icon"></i>
                    <div class="header">验证失败：</div>
                    <p th:errors="*{username}">提交信息不符合规则</p>
                </div>
                /*/-->

                <div class="ui right aligned container">
                    <button class="ui button" onclick="window.history.go(-1)">返回</button>
                    <button class="ui submit teal button">提交</button>
                </div>

            </form>
            <div id="pictureLoad" class="ui inverted dimmer">
                <div class="ui text loader">正在处理中</div>
            </div>
        </div>
    </div>


    <!--底部footer-->
    <footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-max">
        <div class="ui center aligned container">
            <div class="ui inverted divided stackable grid">
                <div class="three wide column">
                    <div class="ui inverted list">
                        <div class="item">
                            <img src="../../static/images/scanner_picture.jpg" class="ui rounded image" alt="站长二维码" style="width: 120px;">
                        </div>
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced">最新博客</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item" > 用户故事（User Story）</a>
                        <a href="#" class="item" > 用户故事（User Story）</a>
                        <a href="#" class="item" > 用户故事（User Story）</a>
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced">联系我</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item" > Email:1718707267@qq.com</a>
                        <a href="#" class="item" > QQ:1718707267</a>
                    </div>
                </div>
                <div class="seven wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced ">ChenJionyu</h4>
                    <p class="m-text-thin m-text-spaced m-text-lined m-opacity-mini">这是我的个人博客，会分享关于编程、写作、思考、相关徳任何内容，希望可以给来到这儿的人有所帮助...</p>
                </div>
            </div>
            <div class="ui inverted section divider"></div>
            <p class="m-text-thin m-text-spaced m-opacity-mini">Copyright ©2023 DaiYan Designed by ChenJiongyu </p>
        </div>
    </footer>

    <script type="text/javascript">

        $(function () {
            $("#hardFile").change(function () {
                var path1 = $("#hardFile").val();
                if (path1.length != 0) {
                    var extStart = path1.lastIndexOf('.'),
                        ext = path1.substring(extStart, path1.length).toUpperCase();
                    if (ext !== '.PNG' && ext !== '.JPG' && ext !== '.JPEG' && ext !== '.GIF') {
                        alert("请上传正确的图片!");
                        return
                    }
                }else{
                    alert("请上传图片!");
                    return
                }

                // ajax上传头像
                // FormData 是 Html5 新加进来的一个类,可以模拟表单数据
                // 可以使用 JQuery 的 $.Ajax 结合 FormData 异步上传二进制文件
                var formData=new FormData();
                var prop = $("#hardFile").prop('files');
                formData.append("file",prop[0]);
                formData.append("imageTypeId",0)
                formData.append("isPrivate",1)

                $("#pictureLoad").attr("class","ui active dimmer")
                $.ajax({
                    method: 'post',
                    url: "/file/upload2",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (res) {
                        console.log(res,"cjytest")
                        if (res.code == 200 ) {
                            // refreshPicture(selectImageId)
                            $("#avatar").val(res.data.fileName)
                            $("#avatarPicture").attr("src",res.data.realPath)
                            console.log($("#avatar").val())
                            alert('上传成功')
                        }else {
                            alert(res.data)
                        }
                        $("#pictureLoad").attr("class","ui dimmer")
                    },
                    error: function (){
                        $("#pictureLoad").attr("class","ui dimmer")
                    }
                })
            })

            $("#hardFile1").change(function () {
                var path1 = $("#hardFile1").val();
                if (path1.length != 0) {
                    var extStart = path1.lastIndexOf('.'),
                        ext = path1.substring(extStart, path1.length).toUpperCase();
                    if (ext !== '.PNG' && ext !== '.JPG' && ext !== '.JPEG' && ext !== '.GIF') {
                        alert("请上传正确的图片!");
                        return
                    }
                }else{
                    alert("请上传图片!");
                    return
                }

                // ajax上传头像
                // FormData 是 Html5 新加进来的一个类,可以模拟表单数据
                // 可以使用 JQuery 的 $.Ajax 结合 FormData 异步上传二进制文件
                var formData=new FormData();
                var prop = $("#hardFile1").prop('files');
                formData.append("file",prop[0]);
                formData.append("imageTypeId",0)
                formData.append("isPrivate",1)

                $("#pictureLoad").attr("class","ui active dimmer")
                $.ajax({
                    method: 'post',
                    url: "/file/upload2",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (res) {
                        console.log(res,"cjytest")
                        if (res.code == 200 ) {
                            // refreshPicture(selectImageId)
                            $("#wxQR").val(res.data.fileName)
                            $("#wxPicture").attr("src",res.data.realPath)
                            console.log($("#wxQR").val())
                            alert('上传成功')
                        }else {
                            alert(res.data)
                        }
                        $("#pictureLoad").attr("class","ui dimmer")
                    },
                    error: function (){
                        $("#pictureLoad").attr("class","ui dimmer")
                    }
                })
            })

            $("#hardFile2").change(function () {
                var path1 = $("#hardFile2").val();
                if (path1.length != 0) {
                    var extStart = path1.lastIndexOf('.'),
                        ext = path1.substring(extStart, path1.length).toUpperCase();
                    if (ext !== '.PNG' && ext !== '.JPG' && ext !== '.JPEG' && ext !== '.GIF') {
                        alert("请上传正确的图片!");
                        return
                    }
                }else{
                    alert("请上传图片!");
                    return
                }

                // ajax上传头像
                // FormData 是 Html5 新加进来的一个类,可以模拟表单数据
                // 可以使用 JQuery 的 $.Ajax 结合 FormData 异步上传二进制文件
                var formData=new FormData();
                var prop = $("#hardFile2").prop('files');
                formData.append("file",prop[0]);
                formData.append("imageTypeId",0)
                formData.append("isPrivate",1)

                $("#pictureLoad").attr("class","ui active dimmer")
                $.ajax({
                    method: 'post',
                    url: "/file/upload2",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (res) {
                        console.log(res,"cjytest")
                        if (res.code == 200 ) {
                            // refreshPicture(selectImageId)
                            $("#zfbQR").val(res.data.fileName)
                            $("#zfbPicture").attr("src",res.data.realPath)
                            console.log($("#zfbQR").val())
                            alert('上传成功')
                        }else {
                            alert(res.data)
                        }
                        $("#pictureLoad").attr("class","ui dimmer")
                    },
                    error: function (){
                        $("#pictureLoad").attr("class","ui dimmer")
                    }
                })
            })
        })

        $(".menu.toggle").click(function (){
            $(".m-item").toggleClass("m-mobile-hide");
        })
        $(".ui.form").form({
            fields:{
                name:{
                    identifier:"name11",
                    rules:[{
                        type:'empty',
                        prompt:'分类名不能为空'
                    }]
                }
            }
        });

        /*点击关闭关闭提示框*/
        $(".message .close").on("click",function () {
            $(this).closest('.message')
                .transition("fade");
        });
    </script>
</body>
</html>